<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涂鸦画板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <canvas id="canvas" width="100" height="100"></canvas>
    <div id="tools" class="tools">
        <button id="pen" class="active" title="画笔">
            <svg class="icon active">
                <use xlink:href="#icon-pen"></use>
            </svg>
        </button>
        <button id="eraser" title="橡皮擦">
            <svg class="icon">
                <use xlink:href="#icon-eraser"></use>
            </svg>
        </button>
        <button id="clear" title="清空">
            <svg class="icon">
                <use xlink:href="#icon-delete"></use>
            </svg>
        </button>
        <button id="undo" title="撤销">
            <svg class="icon">
                <use xlink:href="#icon-undo"></use>
            </svg>
        </button>
        <button id="download" title="保存">
            <svg class="icon">
                <use xlink:href="#icon-download"></use>
            </svg>
        </button>
        <button id="thin" title="细">
            <svg class="icon">
                <use xlink:href="#icon-thin"></use>
            </svg>
        </button>
        <button id="normal" title="正常">
            <svg class="icon">
                <use xlink:href="#icon-normal"></use>
            </svg>
        </button>
        <button id="strong" title="粗">
            <svg class="icon">
                <use xlink:href="#icon-strong"></use>
            </svg>
        </button>
    </div>
    <div class="color-wrapper">
        <ul>
            <li class="black active" id="black" style="background-color: #000;"></li>
            <li class="red" id="red" style="background-color: #fc7c7f;"></li>
            <li class="yellow" id="yellow" style="background-color: #fcd446;"></li>
            <li class="blue" id="blue" style="background-color: #39d2fb;"></li>
            <li class="green" id="green" style="background-color: #23eed8;"></li>
            <li class="purple" id="purple" style="background-color: #8e78d1;"></li>
        </ul>
    </div>

    <script src="//at.alicdn.com/t/font_2434559_pou1su4j0bm.js"></script>
    <script src="./main.js"></script>  
</body>
</html>
